<template>
	<view class="beijingse mainpadding">
		<view class=" ffffff radius">
			<textarea class="margin_top textareas" cols="30" rows="10" placeholder="亲, 您对商品有什么意见？请留下您宝贵的意见~" v-model="comment"></textarea>
			<view class="flexleft flex_wrap">
				<!-- 上传图片 -->
				<view class="item_image_box margin_top flexcenter" v-if="upImg.length" v-for="(item,index) in upImg" :key="item">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deletimg" @click="delimg(index)"></view>
					</view>
				</view>
				<view class="item_image_box margin_top flexcenter" v-if="upImg.length<4">
					<view class="flexcolumn upimagebox radius" @click="uploadImg(4,upImg)">
						<view class="upimage">
							<image src="@/static/images/system/camera.png" class="radius" mode=""></image>
						</view>
						<view style="margin-top: 20rpx;">添加</view>
					</view>
				</view>
			</view>
		</view>
	<!--  -->
		<!-- 固定底部 -->
		<view class="gudingdb" @click="submit">
			<view class="bigbtn">发表</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				 listid:"",
				 upImg:[],
				 comment:"",
			}
		},
		onLoad(options) {
			this.listid = options.id
		},
		methods: {
			submit(){
				if(this.comment==""){
					httpRequest.toast("请输入评价内容")
					return false
				}
				if(this.upImg.length==0){
					httpRequest.toast("请上传图片")
					return false
				}
				httpRequest.request("/api/order/commentOrder", 'POST', {
					id:this.listid,
					comment:this.comment,
					imgList:this.upImg.join()
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
				
			},
			// 删除图片
			delimg(index) {
				this.upImg.splice(index, 1)
			},
			uploadImg(value,upImgs) {
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (let i = 0; i < res.length; i++) {
								 
									_this.uploadImageService(res[i], upImgs)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (let i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(image_item);
				}).catch(err => {});
			},
			 
		}
	}
</script>

<style lang="scss" scoped>
	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
.item_image_box {
		width: 33.33%;
	}
	.djsc {
		width: 198rpx;
		height: 198rpx;
		border-radius: 7rpx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 7rpx;
		}
	}
	.shanchubox {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 39rpx;
		height: 23rpx;
		background: #D0D0D0;
		border-radius: 0px 7rpx 0px 7rpx;
	}

	.shilitu {
		width: 198rpx;
		height: 198rpx;
		border-radius: 7rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 7rpx;
		}
	}

	.sanshisan {
		width: 33.33%;
	}

	.textareas {
		width: 100%;
		box-sizing: border-box;
		height: 203rpx;
		padding: 30rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EFEFEF;
	}
</style>
